<template>
    <div class="components-demo">
        <button-counter id="l1" v-on:clickCounter="resultCallback"></button-counter>
        <button-counter id="l2" v-on:clickCounter="resultCallback"></button-counter>
        <button-counter id="l3" v-on:clickCounter="resultCallback"></button-counter>
        <div>总计：{{counter}}</div>
        <input v-model="input" />{{input}}
        <div>{{ data }}</div>
    </div>
</template>
<script>
    import ButtonCounter from './buttonCounter.vue';
    import { mapState } from 'vuex';

    export default {
        name: "example1",
        data(){
            return {
                input: '',
                counter: 0
            }
        },
        computed: {
            ...mapState('test', ['data'])
        },
        components: {
            'button-counter': ButtonCounter
        },
        methods: {
            resultCallback(counter){
               this.counter++;
            }
        }
    }
</script>
<style scoped lang="less">
    .components-demo {
        button{
            width: 100px;height:30px;
        }
        div{
            color:#000;
        }
    }
</style>